<template>
     <view class="page pos-rel">
        <view class="top over-hide "></view>
        <view class="content over-hide pos-abs">
            <view class="container">
                <view class="bac-color-fff info mar-t-20 ">
                    <view class="flex align-center bac-color-fff">
                        <view class="tag-lag">

                        </view>
                        <view class="flex-1 mar-l-5 font-bold font-size-20">
                            简要说说此次帮扶内容
                        </view>
                      
                    </view>
                    <view class="font-size-13 font-color-888 mar-t-10">
                        <!-- 第四次记录 -->
                    </view>
                    <view class="w-100 over-hid mar-t-10">
                        <textarea class="help-content" auto-height="true" placeholder="请输入您的心得..." v-model="help_info"></textarea>
                    </view>
                </view>

                <view class="flex align-center mar-t-20 bac-color-fff pad-l-10 pad-t-20 pad-b-20" >
                    <!-- <file-upload v-model="imageValue" file-extname="png,jpg,jpeg"  :limit="3" :images.sync="images" :uploadurl="uploadurl"></file-upload> -->
                    <!-- <view class="bac-color-fff mar-t-20 flex align-center" v-if="address">
                        <image src="@/static/icons/address.png" style="height:1em;width:1em"></image>
                        <text class="mar-l-5 font-color-888 font-size-13" >{{address}}</text>
                    </view> -->
					<image style="width: 80px;height: 80px;margin: 3px;" v-for="(item,index) in base64Array" :src="item" mode=""></image>
					<view class="uploadPicBox flex align-center text-center justify-around" @click="insertImage" v-if="base64Array.length<3">
						<!-- <image class="img" :src="form.avatar[0]" mode="scaleToFill"></image> -->
						<!-- <u-icon name="plus" color="#999" size="100"></u-icon> -->
						<text style="font-size: 40px;" class="font-color-999">+</text>
					</view>
                </view>
				<view class="flex align-center mar-t-20 bac-color-fff pad-l-10 pad-t-20 pad-b-20 font-color-999 font-size-16" v-if="address">
					打卡地址：{{address}}
				</view>
                <view class="tipText font-size-14 font-color-999 text-center">
                	帮扶打卡得10积分，当天最高可获得40分
                </view>
                <button :loading="disable" class="font-color-fff confirm-btn2" @click="subHelp">
                    <text class="font-size-16">提交帮扶</text>
                </button>
            </view>
        </view>
        
    </view>
</template>

<script>
import fileUpload from '@/components/file-upload' 
import {helpLogAdd} from '@/utils/http'
import { apiurl,zwapploginurl,alipayloginurl } from '@/common/config.js'
// import VConsole from 'vconsole'
// new VConsole()
export default {
    components:{
        fileUpload
    },
    data() {
        return {
            uploadurl:apiurl()+'api/Common/upload',
            social_help_id :'',
            images:[] ,
            imageValue:[],
            address:'',
            help_info :'',
            disable:false,
			base64Array:[]
        }
    },
	onLoad(option){
	   this.social_help_id = option.id
	   this.address = uni.getStorageSync('address')
	   console.log('this.address',this.address)
	   let app_type = uni.getStorageSync('app_type');
	   console.log('app_type',app_type)
	   if(app_type != 'h5'){
		   console.log('getLocation')
		   this.getLocation();
	   }
	},
    methods: {
        getLocation(){
            ZWJSBridge.getLocation().then((result) => {
				console.log('getLocation',result);
                if(result){
					if(!this.address){
						this.address = result.detailAddress
						console.log('this.address',this.address)
					}
                }
            }).catch((error) => {
                console.log(error);
            });
        },
		// 新增图片
		insertImage() {
			console.log('insertImage')
			const _this = this
			if(this.base64Array.length>=3){
				uni.showToast({
					title:'图片最多上传3张'
				})
				return;
			}
			//前端代码
			uni.chooseImage({
				count: 3,
				type:'image',
				sizeType:['compressed'],
				sourceType: ['album'], //从相册选择
				success(res) {
					console.log('chooseImage__res',res);
					if (res.tempFilePaths.length > 0) {
						let filePath = res.tempFilePaths[0]
						let tempFiles = res.tempFiles
						console.log('tempFiles',tempFiles)
						tempFiles.forEach(file=>{
							_this.getImageBase64(file)
						})
						
						// let suffix = res.tempFiles[0].type.split('/')[1]
						// if(tempFiles.type.indexOf('image')==-1){
						// 	//如果不是图片，则终止
						// 	uni.showModal({
						// 		title:'系统提示',
						// 		content:'系统不接受非图片类型的文件'
						// 	})
						// 	return
						// }
						// if(tempFiles.size/1024/1024>1){
						// 	uni.showModal({
						// 		title:'系统提示',
						// 		content:'系统不接受大于1M的图片，请压缩后上传'
						// 	})
						// 	return
						// }
						
			
					}
				}
			});
		},
		//图片转base64
		getImageBase64(file){
			const _this = this
			var reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = function(){
				console.log('reader.result',reader.result)
				_this.base64Array.push(reader.result)
			    // return reader.result;
			};
		},
        subHelp(){
            if(this.disable == false){
                let _that = this;
				console.log('base64Array',this.base64Array)
				if(!this.help_info){
					uni.showModal({
						title: '系统提示',
						content: '请填写帮扶内容',
						showCancel: false,
						confirmText: '好的',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					return;
				}
				if(!this.base64Array.length){
					uni.showModal({
						title: '系统提示',
						content: '请上传图片',
						showCancel: false,
						confirmText: '好的',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					return;
				}
				let params = {
                    social_help_id:this.social_help_id,
                    help_images :this.base64Array.join('|'),
                    help_address:this.address,
                    help_info:this.help_info,
                }
				this.disable = true;
                helpLogAdd(params).then(res=>{
                    if(res){
                        this.showModelTip('提交成功',()=>{
							console.log('bus.$emit refreshHelpLog')
							this.bus.$emit('refreshHelpLog')
                            uni.navigateBack({
                            	delta:1
                            })
                        })
                    }else{
                        this.disable = false
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
page{
    background-color: #F4F5FA !important;
}
.top{
    top: 0;
    width: 100%;
    height: 200px;
    background-image: linear-gradient(to right,#9CECFB, #65C7F7, #65C7F7);
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px
}
.content{
    top: 10px;
    width: 100%;
    height: 100%;
}
.content .info{
    min-height: 200px;
    border-radius: 8px;
    padding:15px 20px;
}
.help-lag {
    padding: 10px 15px;
    border-radius: 5px;
}
.tag-lag{
    background-color: #0088FF;
    width: 4px;
    height: 20px;
    border-radius: 5px;
}
.help-content{
    width: 100%;
	height: 160px !important;
    background-color: #f4f4f4;
    padding: 8px;
}
.uploadPicBox{
	border: 1px solid #cacaca;
	width: 80px;
	height: 80px;
	overflow: hidden;
}
.confirm-btn2{
  height: 50px;
  line-height: 50px;
  background-color: #0088FF;
  color: #fff;
  width: 70%;
  margin:0 auto;
  margin-top: 40rpx;
  text-align: center;
  border-radius: 8px;
 
}
</style>